<script setup>
import { ref } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { evaluationsListApi, evaluationsDeletetApi } from '@/apis/consult.js'
import { useButtonStyle } from '@/composables/useButtonStyle.js'

// 正确使用组合式函数获取按钮样式
const buttonStyle = useButtonStyle()
const params = ref({
	pageSize: 10,
	pageNum: 1
})
const loadStatus = ref({
	status: "loadmore", // loadmore, loading, nomore
	noMore: false,
	loading: false
})
const evaluationList = ref([])

const getData = async () => {
	// 防止重复加载
	if (loadStatus.value.noMore || loadStatus.value.loading) return
	loadStatus.value.loading = true
	loadStatus.value.status = "loading"
	try {
		const res = await evaluationsListApi(params.value)
		const { rows, total } = res
		// 如果是第一页，重置数据
		if (params.value.pageNum === 1) {
			evaluationList.value = rows
		} else {
			evaluationList.value = [...evaluationList.value, ...rows]
		}
		// 判断是否还有更多数据
		if (rows.length < params.value.pageSize || evaluationList.value.length >= total) {
			loadStatus.value.noMore = true
			loadStatus.value.status = "nomore"
		} else {
			loadStatus.value.status = "loadmore"
		}
		// 只有成功获取数据后才增加页码
		params.value.pageNum++
	} catch {
		// 失败时恢复状态
		loadStatus.value.status = "loadmore"
	} finally {
		loadStatus.value.loading = false
	}
}
getData()

const handleDelete = val => {
	uni.showModal({
		title: '温馨提示',
		content: `确定要删除${val.comment}的数据吗?`,
		success: async res => {
			try {
				uni.showLoading({ title: '删除中...', mask: true })
				await evaluationsDeletetApi(val.id)
				evaluationList.value = evaluationList.value.filter(item => item.id != val.id)
				uni.$u.toast("删除成功")
			} catch {
				uni.$u.toast("删除失败")
			} finally {
				uni.hideLoading()
			}
		}
	})
}

const handleEdit = item => {
	const data = JSON.stringify(item)
	uni.navigateTo({
		url: `/pages/consult/scoreForm?data=${data}`
	})
}

// 上拉加载更多
onReachBottom(() => {
	if (!loadStatus.value.noMore) {
		getData()
	}
})

</script>


<template>
	<view class="page_container pt">
		<view class="content">
			<template v-if="evaluationList.length > 0">
				<view v-for="(item) in evaluationList" :key="item.id" class="list-item">
					<view class="item-header">
						<text class="item-title">预约ID: {{ item.appointmentId }}</text>
					</view>
					<view class="rating-section">
						<view class="rating-item">
							<text class="rating-label">评价内容:</text>
							<text class="content-text">{{ item.comment || '暂无评价内容' }}</text>
						</view>
						<view class="rating-item">
							<text class="rating-label">提交时间:</text>
							<text class="content-text"> {{ item.createdAt }}</text>
						</view>
						<view class="rating-item">
							<text class="rating-label">服务评分:</text>
							<u-rate v-model="item.serviceRating" disabled size="28"></u-rate>
						</view>
						<view class="rating-item">
							<text class="rating-label">处理流程评分:</text>
							<u-rate v-model="item.processRating" disabled size="28"></u-rate>
						</view>
					</view>
					<!-- 操作按钮 - 现在放在底部 -->
					<view class="action-buttons">
						<u-button size="mini" :custom-style="buttonStyle.customStyle" type="primary" plain @click="handleEdit(item)">
							<u-icon name="edit-pen" size="30"></u-icon> 详情
						</u-button>
						<u-button style="margin-left: 20rpx;" size="mini" :custom-style="buttonStyle.customStyle" type="error" plain
							@click="handleDelete(item)">
							<u-icon name="trash" size="30"></u-icon> 删除
						</u-button>
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</template>

			<!-- 空状态 -->
			<u-empty v-if="evaluationList.length === 0" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
</template>


<style lang="scss" scoped>
.page_container {
	height: 100vh;
	background-color: #f5f5f5;
}

.list-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	.item-header {
		margin-bottom: 20rpx;

		.item-title {
			font-size: 32rpx;
			font-weight: bold;
			color: $list-color;
		}
	}

	.rating-section {
		margin-bottom: 20rpx;
		font-size: $list-font-size;

		.rating-item {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.rating-label {
				margin-right: 15rpx;
				width: 200rpx;
			}

			.content-text {
				flex: 1;
			}
		}
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx dashed #eee;
	}
}

.add-btn {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	z-index: 100;
}
</style>